import React, { PureComponent, Fragment } from 'react';
import { TopicWrapper, TopicItem } from '../sytle'
import { connect } from 'react-redux';

class Topic extends PureComponent {
    render() {
        const { list } = this.props;
        return (
            <Fragment>
                <TopicWrapper>
                    {
                        list.map((item) => {
                            return (
                                <TopicItem key={item.get('id')}>
                                    <img alt='' className='topic-pic' src={item.get('imgUrl')} />
                                    {item.get('title')}
                                </TopicItem>
                            )
                        })
                    }
                </TopicWrapper>
            </Fragment>
        )
    }
}

const mapState = (state) => {
    return {
        list: state.getIn(['home','topicList'])
    }
};


export default connect(mapState,null)(Topic);